<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input {
				width: 300px;
				height: 36px;
				padding-left: 5px;
				color: #ccc;
				/* cursor: text; */
			}
			label {
				position: absolute;
				top: 82px;
				left: 60px;
				font-size: 12px;
				color: #CCCCCC;
				cursor: text;
			}
			.hide {
				display: none;
			}
			.show {
				display: block;
			}
		</style>
	</head>
	<body>
		京东：<input id="inp1" type = "text" value = "我是京东"><br><br>
		淘宝：<label for="inp2">我是淘宝</label><input type = "text" id="inp2"><br><br>
		placeholder:<input type = "text" placeholder="我是placeholder" />
		
		<script type="text/javascript">
			//需求: 京东的获取焦点
			//思路： 京东的input按钮获取了插入条光标立刻删除类容,失去插入条光标显示文字/
			//步骤: 
			//1,获取事件源和相关元素;
			//2,绑定事件(事件源和事件绑定一起);
			//3,书写事件驱动程序;
			
			var int1 = document.getElementById("inp1");
			inp1.onfocus = function (){
				//判断: 如果input里面的类容是"我是京东"，那么把值赋值为""
				if(this.value === "我是京东"){
					inp1.style.color = "#000";
					inp1.value = "";
				}
			}
			inp1.onblur = function (){
				if(this.value === ""){
					this.style.color = "#ccc";
					this.value = "我是京东";
				}
			}
			
			
			
			//需求: 淘宝的获取焦点
			//思路: 在input中输入文字,lable标签隐藏,里面的文字变成空字符串
			//步骤:
			//1.获取事件源和相关元素
			//2.绑定事件
			//3.书写事件驱动程序
			
			var inp2 = document.getElementById("inp2");
			var lab = document.getElementsByTagName("label")[0];
			
			inp2.focus();
			inp2.oninput = function (){
				// console.log(this.value);
				if(this.value === ""){
					this.style.color = "#ccc";
					lab.className = "show";
				}else {
					lab.className = "hide";
					this.style.color = "#000";
				}
			}
		</script>
	</body>
</html>
